<template>
  <el-menu
      text-color="#ffffff"
      background-color="#303133"
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      :collapse="isExpand"
      :style="mobile ? {width : 'auto'} : ''"
      @select="handleSelect">
    <el-menu-item>
      <i>
        <svg-icon  size="24px" icon-class="logo" class="my-icon frog-icon"/>
      </i>
      <template #title>
        <span>心机之蛙</span>
      </template>
    </el-menu-item>
    <sidebar-item v-for="route in routes" :key="route.path" :item="route" />
  </el-menu>
</template>

<script setup>
import SidebarItem from "@/components/SideBar/SidebarItem";
import route from '@/store';
import router from "@/router";
import {onMounted, ref} from "vue";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {getValue, setKeyValue} from "@/utils/auth";
//读取vuex的路由信息
const routes = route.getters.sidebarRouters;
console.warn(routes)
//默认激活的菜单项
const activeIndex = ref(getValue('route') ? getValue('route'):'index' );
const props = defineProps({
  isExpand: {
    type: Boolean,
    required: false,
    default: false,
  },
  mobile:{
    type: Boolean,
    required: false,
    default: false,
  }
});

const idx= ref(true);

const emit = defineEmits(['update:drawer']);


// 在组件挂载时调用一次以确保初始内容被加载
onMounted(() => {
  handleSelect(activeIndex.value);
});

const handleSelect = (index) => {
  setKeyValue("route", index)
  router.push(index);
  if (idx.value) {
    idx.value = false;
    return
  }
  emit("update:drawer",false)
}
</script>

<style scoped>
.frog-icon {
  width: 100px;
  height: 100px;
  color: green; /* 改变青蛙的颜色 */
}
.el-menu {
  border: none;
  height: 100%;
}
.my-icon {
  margin: 0 16px 0 0;
}
.el-menu-item span{
  user-select: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
</style>
